<script>
document.addEventListener('DOMContentLoaded', function () {
  // انتخاب تمام مسیرهای نقشه
  const cityPaths = document.querySelectorAll('path.sigmaweb-iran-city-map');

  // کلیک روی نقشه
  cityPaths.forEach(function (path) {
    path.addEventListener('click', function () {
      const province = this.dataset.province;

      // اکتیو کردن شهر روی نقشه
      cityPaths.forEach(function (el) {
        el.classList.remove('active');
      });
      this.classList.add('active');

      // اکتیو کردن دکمه‌ی مربوطه
      const cityButtons = document.querySelectorAll('.sigmaweb-iran-city-btn');
      cityButtons.forEach(function (btn) {
        btn.classList.remove('active');
        if (btn.dataset.province === province) {
          btn.classList.add('active');
        }
      });
    });
  });

  // کلیک روی دکمه
  const cityButtons = document.querySelectorAll('.sigmaweb-iran-city-btn');
  cityButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      const province = this.dataset.province;

      // اکتیو کردن دکمه
      cityButtons.forEach(function (btn) {
        btn.classList.remove('active');
      });
      this.classList.add('active');

      // اکتیو کردن شهر روی نقشه
      cityPaths.forEach(function (path) {
        path.classList.remove('active');
        if (path.dataset.province === province) {
          path.classList.add('active');
        }
      });
    });
  });

  // نمایش لیست نمایندگان
  function loadRepresentatives(province) {
    const resultsElement = document.getElementById('sigmaweb-results');
    resultsElement.innerHTML = '<p>⌛ در حال بارگذاری...</p>';

    const formData = new FormData();
    formData.append('action', 'sigmaweb_filter_representatives');
    formData.append('province', province);

    fetch('/wp-admin/admin-ajax.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(response => {
      resultsElement.innerHTML = response;
    })
    .catch(error => {
      console.error('Error:', error);
      resultsElement.innerHTML = '<p>خطا در بارگذاری داده‌ها</p>';
    });
  }

  // برای دکمه‌ها
  cityButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      const province = this.dataset.province;
      loadRepresentatives(province);
    });
  });

  // برای pathها
  cityPaths.forEach(function (path) {
    path.addEventListener('click', function () {
      const province = this.dataset.province;
      loadRepresentatives(province);
    });
  });

  // تولتیپ نقشه
  const tooltip = document.createElement('div');
  tooltip.classList.add('sigmaweb-tooltip-map');
  document.body.appendChild(tooltip);

  cityPaths.forEach(function (path) {
    path.addEventListener('mousemove', function (e) {
      const text = this.dataset.province;
      tooltip.textContent = text;
      tooltip.style.left = e.pageX + 12 + 'px';
      tooltip.style.top = e.pageY + 12 + 'px';
      tooltip.style.display = 'block';
    });

    path.addEventListener('mouseleave', function () {
      tooltip.style.display = 'none';
    });
  });
  //وقتی روی دکمه یا یک استان درون نقشه هاور شود دکمه یا استان مربوطه درون نقشه استایل میگیره

  const buttons = document.querySelectorAll('.sigmaweb-iran-city-btn');
  const paths = document.querySelectorAll('path.sigmaweb-iran-city-map');

  // هاور روی دکمه‌ها
  buttons.forEach(function (btn) {
    btn.addEventListener('mouseenter', function () {
      const province = btn.dataset.province;
      document.querySelectorAll("path.sigmaweb-iran-city-map[data-province='" + province + "']")
        .forEach(el => el.classList.add('sigmaweb-hovered-map'));
    });
    btn.addEventListener('mouseleave', function () {
      const province = btn.dataset.province;
      document.querySelectorAll("path.sigmaweb-iran-city-map[data-province='" + province + "']")
        .forEach(el => el.classList.remove('sigmaweb-hovered-map'));
    });
  });

  // هاور روی pathهای نقشه
  paths.forEach(function (path) {
    path.addEventListener('mouseenter', function () {
      const province = path.dataset.province;
      document.querySelectorAll(".sigmaweb-iran-city-btn[data-province='" + province + "']")
        .forEach(el => el.classList.add('sigmaweb-hovered-map'));
    });
    path.addEventListener('mouseleave', function () {
      const province = path.dataset.province;
      document.querySelectorAll(".sigmaweb-iran-city-btn[data-province='" + province + "']")
        .forEach(el => el.classList.remove('sigmaweb-hovered-map'));
    });
  });
});
</script>